<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <style>
        .por svg{
            transform: rotate(-90deg);
        }
        .por{
            position: relative;
        }
        .poa{
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body ng-app="realtimeDataApp" ng-controller="realtimeDataCtrl">
    <div class="container-fluid ls-bg">
        <div class="ls-nav">
            <div class="container">
                <div class="pull-left">
                    <span>设备列表：</span>
                    <i><select class="form-control" ng-options="device.name for device in devices" ng-model="device">
                    
                </select></i>
                </div>
                <div class="pull-right">
                    <div class="ls-refresh"></div>
                </div>
            </div>
        </div>

        <!-- 内容start-->
        <div class="container ls-container">
            <div class="row">
                <!--光照强度 start-->
                <div class="col-sm-5 ls-light_2">
                    <div class="ls-left">
                        <p class="ls-font">光照强度</p>

                        <div class="ls-light">
                            <div class="ls-light_1 por wrap1">
                                <svg width="212" height="212" xmlns="http://www.w3.org/2000/svg">
                                    <circle class="progress" r="96" cy="106" cx="106" stroke-width="20" stroke="#349ad6"  fill="none"/>
                                </svg>
                                <div class="ls-num poa">
                                    <p class="p1 value" max=13000 min=0 ng-bind="deviceInfo.gzqd"></p>
                                    <p class="p2">优</p>
                                </div>
                            </div>
                        </div>

                        <div class="ls-plan">
                            <p class="ls-p1">
                                <span class="span1">0</span>
                                <span class="span2">35</span>
                                <span class="span3">75</span>
                                <span class="span4">115</span>
                                <span class="span5">150</span>
                                <span class="span6">250</span>
                                <span class="span7">>500MG/㎡</span>
                            </p>
                        </div>
                        <div class="ls-plan_1">
                            <p class="p3">
                                <span class="ls-span1"></span>
                                <span class="ls-span2"></span>
                                <span class="ls-span3"></span>
                                <span class="ls-span4"></span>
                                <span class="ls-span5"></span>
                                <span class="ls-span6"></span>
                            </p>

                            <p class="p4">
                                <span>优</span>
                                <span>良</span>
                                <span>轻度</span>
                                <span>中度</span>
                                <span>重度</span>
                                <span>严重</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!--光照强度 end-->

                <div class="col-sm-7">
                    <!--空气start-->
                    <div class="ls-air">
                        <div class="ls-air_1">
                            <div class="row">
                                <div class="col-xs-3">
                                    <img src="images/air.png" class="img-responsive" alt="空气"/>
                                </div>

                                <div class="col-xs-1">
                                    <span class="ls-span1"></span>
                                </div>
                                <div class="col-xs-3">
                                    <div class="ls-div">
                                        <div class="ls-air_2 wrap2 por">
                                            <svg width="108" height="108" xmlns="http://www.w3.org/2000/svg">
                                                <circle class="progress" r="44" cy="54" cx="54" stroke-width="20" stroke="#349ad6"  fill="none"/>
                                            </svg>
                                            <div class="ls-num poa">
                                                <p class="p5 value" max=60 min=-15 ng-bind="deviceInfo.kqwd">0</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <div class="ls-div ls-div_2">
                                        <div class="ls-air_2 wrap3 por">
                                             <svg width="108" height="108" xmlns="http://www.w3.org/2000/svg">
                                                <circle class="progress" r="44" cy="54" cx="54" stroke-width="20" stroke="#349ad6"  fill="none"/>
                                            </svg>
                                        <div class="ls-num poa">
                                            <p class="p5 value" max=100 min=0 ng-bind="deviceInfo.kqsd">0</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 text-center ls-div_1">
                                <span>空气</span>
                            </div>
                            <div class="col-xs-2"></div>
                            <div class="col-xs-3 ls-div_1">
                                <span class="ls-span2">温度 ℃ </span>
                            </div>
                            <div class="col-xs-3 ls-div_1 text-center">
                                <span class="ls-span3">湿度 %</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--空气end-->

                <!--土壤start-->
                <div class="ls-air" style="margin-top: 28px">
                    <div class="ls-air_1">
                        <div class="row">
                            <div class="col-xs-3">
                                <img src="images/soil.png" class="img-responsive " alt="土壤"/>
                            </div>

                            <div class="col-xs-1">
                                <span class="ls-span1"></span>
                            </div>
                            <div class="col-xs-3">
                                <div class="ls-div">
                                    <div class="ls-air_2 wrap4 por">
                                           <svg width="108" height="108" xmlns="http://www.w3.org/2000/svg">
                                                <circle class="progress" r="44" cy="54" cx="54" stroke-width="20" stroke="#349ad6"  fill="none"/>
                                            </svg>
                                        <div class="ls-num poa">
                                            <p class="p5 value" max=60 min=-15 ng-bind="deviceInfo.trwd">0</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-3">
                                <div class="ls-div ls-div_2">
                                    <div class="ls-air_2 wrap5 por">
                                        <svg width="108" height="108" xmlns="http://www.w3.org/2000/svg">
                                                <circle class="progress" r="44" cy="54" cx="54" stroke-width="20" stroke="#349ad6"  fill="none"/>
                                        </svg>
                                    <div class="ls-num poa">
                                        <p class="p5 value" max=100 min=0 ng-bind="deviceInfo.trsd"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 text-center ls-div_1">
                            <span>土壤</span>
                        </div>
                        <div class="col-xs-2"></div>
                        <div class="col-xs-3 ls-div_1">
                            <span class="ls-span2">温度 ℃ </span>
                        </div>
                        <div class="col-xs-3 ls-div_1 text-center">
                            <span class="ls-span3">湿度 %</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--土壤end-->
        </div>
    </div>
    <!--空气end-->
</div>
</div>
<!-- 内容end-->
</body>
  <script src="/smartgarden/plugins/angular/angular.min.js"></script>
  <script src="/smartgarden/plugins/angular/angular-animate.min.js"></script>
  <script src="/smartgarden/plugins/angular/angular-cookies.min.js"></script>
  <script src="/smartgarden/plugins/angular/angular-ui-router.min.js"></script>
  <script src="/smartgarden/plugins/angular/ocLazyLoad.min.js"></script>  
  <script src="/smartgarden/plugins/angular/ui-bootstrap-tpls.min.js"></script>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/dataService.js"></script>
  <script src="js/realTimeData1.js"></script>
<script>

    progress('.wrap1');
    progress('.wrap2');
    progress('.wrap3');
    progress('.wrap4');
    progress('.wrap5');
    function progress(obj){
        var r= $(obj).find('.progress').attr('r');
        var progress,stroke_percentage,max,min,value,time;
        var perimeter = Math.PI * ( r * 2);
        $(obj).find('.progress').css({
            strokeDasharray: perimeter,
            strokeDashoffset: perimeter,
        });
        ani();
        function ani(){
            max = parseInt($(obj).find('.value').attr('max'));
            min = parseInt($(obj).find('.value').attr('min'));
            value = parseInt($(obj).find('.value').text());
            if (value>max||value<min) {
                alert('fail:er304');
                $('.value').text('NaN');
                clearInterval(time);
                return 0;
            }
            progress = (value-min)/(max-min);
            stroke_percentage = perimeter - (progress * perimeter);
            $(obj).find('.progress').stop().animate({strokeDashoffset: stroke_percentage}, 5000);
        }
        time = setInterval(function(){
            if (value!=parseInt(parseInt($(obj).find('.value').text()))) {
                ani();
            }
        },500);
    }
</script>
</html>
